import React, { useState } from 'react'
import './GoodsImage.css';

export default function GoodsImage() {
  //声明一个数组
  let images = [
    '/goods/1.jpg',
    '/goods/2.jpg',
    '/goods/3.jpg',
    '/goods/4.jpg',
    '/goods/5.jpg',
  ];
  //声明状态
  let [index, setIndex] = useState(0);

  return (
    <div className='goods-image'>
      <div className="big-image">
        <img src={images[index]} alt="" />
      </div>
      <div className="small-images">
        {
          images.map((item, k) => {
            return <div key={k} className="item" onClick={() => {
              //更新状态
              setIndex(k);
            }}>
              <img className={index === k ? 'active' : null} src={item} alt='' />
            </div>
          })
        }
      </div>
    </div>
  )
}
